<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  body {
    background-color: #000;
  }

  #earth {
    width: 300px;
    height: 300px;
    /* 3024*1512 */
    background: url("./bg.webp");
    border-radius: 50%;
    background-size: 100% 100%;
    box-shadow: inset 8px 36px 80px 36px rgb(0, 0, 0),
      inset -6px 0 12px 4px rgba(255, 255, 255, 0.3);
    animation-name: rotate;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
  }

  @keyframes rotate {
    from {
      background-position: 0px 0px;
    }

    to {
      background-position: 3024px 0px;
    }
  }

  @-webkit-keyframes rotate {
    from {
      background-position: 0px 0px;
    }

    to {
      background-position: 3024px 0px;
    }
  }
</style>

<body>
  <div id="earth"></div>
</body>

</html>